<template>
  <a-row id="globalHeader" align="center" :wrap="false">
    <a-col flex="auto">
      <a-menu
        mode="horizontal"
        :selected-keys="selectedKeys"
        @menu-item-click="doMenuClick"
      >
        <a-menu-item
          key="0"
          :style="{ padding: '0', marginRight: '38px' }"
          disabled
        >
          <div class="titleBar">
            <img class="logo" src="../assets/miku.png" />
            <div class="title">AI智创</div>
          </div>
        </a-menu-item>
        <a-menu-item v-for="item in visibleRoutes" :key="item.path">
          {{ item.name }}
        </a-menu-item>
      </a-menu>
    </a-col>
    <a-col flex="100px">
      <div v-if="loginUserStore.loginUser.id" class="user-info-container">
        <div class="username" @click="goToProfile">
          {{ loginUserStore.loginUser.userName ?? "匿名用户" }}
        </div>
        <a-button type="outline" @click="doLogout" class="logout-btn"
          >退出
        </a-button>
      </div>
      <div v-else>
        <a-button type="primary" href="/user/login">登录</a-button>
      </div>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
import { routes } from "@/router/routes";
import { computed, ref } from "vue";
import { useLoginUserStore } from "@/store/userStore";
import checkAccess from "@/access/checkAccess";
import { useRouter } from "vue-router";
import axios from "axios";

const loginUserStore = useLoginUserStore();

const router = useRouter();
// 当前选中的菜单项
const selectedKeys = ref(["/"]);
// 路由跳转时，自动更新选中的菜单项
router.afterEach((to, from, failure) => {
  selectedKeys.value = [to.path];
});

// 展示在菜单栏的路由数组
const visibleRoutes = computed(() => {
  return routes.filter((item) => {
    if (item.meta?.hideInMenu) {
      return false;
    }
    // 根据权限过滤菜单
    if (!checkAccess(loginUserStore.loginUser, item.meta?.access as string)) {
      return false;
    }
    return true;
  });
});

// 点击菜单跳转到对应页面
const doMenuClick = (key: string) => {
  router.push({
    path: key,
  });
};

//退出功能
const doLogout = async () => {
  try {
    // 发送退出请求
    await axios.post("http://localhost:8101/api/user/logout", null, {
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`,
      },
    });
  } catch (error) {
    console.error("退出失败:", error);
  } finally {
    // 无论请求成功与否都执行本地清理
    localStorage.removeItem("token");
    window.location.href = "/user/login";
  }
};

const goToProfile = () => {
  router.push({
    path: "/user/profile", // 根据实际路由配置修改
    query: {
      id: loginUserStore.loginUser.id,
    },
  });
};
</script>

<style scoped>
.user-info-container {
  display: flex;
  align-items: center;
  gap: 16px; /* 元素间距 */
  padding: 0 12px;
}

/* 用户名样式 */
.username {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--color-text-1);
  cursor: pointer;
  transition: color 0.2s;
}

/* 退出按钮优化 */
.logout-btn {
  border-radius: 4px;
  padding: 0 12px;
  height: 32px;
  transition: background-color 0.2s, border-color 0.2s;
}

/* 悬停交互 */
.logout-btn:hover {
  background-color: var(--color-fill-2);
  border-color: var(--color-border-2);
}

.username:hover {
  color: var(--color-primary);
}

#globalHeader {
}

.titleBar {
  display: flex;
  align-items: center;
}

.title {
  margin-left: 16px;
  color: black;
}

.logo {
  height: 48px;
}

/* 新增头像样式 */
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
</style>
